<template>
  <div class="pd-20">
    <el-button type="primary"
               @click="backPage">返 回</el-button>
    <el-date-picker v-model="year"
                    @change="changeYear"
                    type="year"
                    value-format="yyyy"
                    placeholder="选择年份">
    </el-date-picker>
    <el-card class="mt-20">
      截止<el-tag type="danger">{{dataObj.getDate}}</el-tag>共计打印：<el-tag type="danger">{{dataObj.totalNum ? dataObj.totalNum : 0}}</el-tag>次；沃慧管pc累计打印：
      <el-tag type="danger">{{dataObj.pcNum ? dataObj.pcNum : 0}}</el-tag>人次，
      沃慧管pad累计打印：<el-tag type="danger">{{dataObj.padNum ? dataObj.padNum : 0}}</el-tag>人次，
      5G系统打印：<el-tag type="danger">{{dataObj.fiveGNum ? dataObj.fiveGNum : 0}}</el-tag>人次；
    </el-card>
    <div id="echarts"
         class="chart_h360 mt-20"></div>
  </div>
</template>
<script>
  const currDate = new Date();
  const getDate = currDate.getFullYear() + '-' + (currDate.getMonth() + 1) + '-' + currDate.getDate();
  export default {
    name: 'ticketEcharts',
    data () {
      return {
        year: String(currDate.getFullYear()),
        routeParams: JSON.parse(this.$route.query.routeParams),
        chartsList: [],
        dataObj: {}
      }
    },
    methods: {
      backPage () {
        this.$router.push({ name: 'ticket' });
      },
      getEcharts () {
        this.post(this.api.promote.ticketStatistics, {
          year: this.year,
          ...this.routeParams
        }).then((res) => {
          if (res.data.code === '200') {
            this.dataObj = res.data.object;
            this.dataObj['getDate'] = getDate;
            this.chartsList = res.data.object.statisticsYearDtos;
            let data0 = this.chartsList.length > 0 ? this.chartsList[0].counts : [];
            let data1 = this.chartsList.length > 0 ? this.chartsList[1].counts : [];
            let data2 = this.chartsList.length > 0 ? this.chartsList[2].counts : [];
            this.echarts(data0, data1, data2);
          }
        })

      },
      changeYear (val) {
        this.year = val;
        this.getEcharts();
      },
      echarts (data0, data1, data2) {
        let echartBox = this.$echarts.init(document.getElementById('echarts'));
        echartBox.setOption({
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['沃慧管pc', '沃慧管pad', '5G系统']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '沃慧管pc',
              type: 'line',
              stack: '总量',
              smooth: true,  // true 为平滑曲线，false为直线
              data: data0
            },
            {
              name: '沃慧管pad',
              type: 'line',
              stack: '总量',
              smooth: true,
              data: data1
            },
            {
              name: '5G系统',
              type: 'line',
              stack: '总量',
              smooth: true,
              data: data2
            }
          ]

        });
      },
    },
    created () {
      this.getEcharts();
    }
  }
</script>